{# 继承模板 #}
{% extends 'common/base.html' %}

{# 加载静态文件 #}
{% load staticfiles %}

{% block head_title %}天天生鲜-购物车{% endblock head_title %}

{% block head_js %}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
        // 更新统计数据
        function update_goods() {
            var total = 0;
            var amount = 0;
            $('.cart_list_td .col01 input:checkbox').each(function () {
                if ($(this).prop('checked')){
                    total += parseFloat($(this).parent().parent().find('.col07').html());
                    amount += parseInt($(this).parent().parent().find('.num_show').val());
                }
            });
            // alert(total.toFixed(2));
            $('.settlements .col03 em').html(total.toFixed(2));
            // alert(amount);
            $('.settlements .col03 b').html(amount);
            $('.total_count em').html(amount);
        }

        // 新增后台数据
        function update_carts(obj, num) {
            var price = parseFloat(obj.find('.col05').html());
            var single = price * num;
            obj.find('.num_show').val(num);
            obj.find('.col07').html(single.toFixed(2)+'元');
            // 发送ajax请求，商品id和商品数量
            // 获取商品的id
            var goods_id = parseInt(obj.find('.col01 input:checkbox').val());
            $.ajax({
                'url': "{% url 'carts:edit_carts' %}",
                'data': {'id': goods_id, 'num': num},
                'type': 'get',
                'async': false,  // 设置同步请求
                'success': function (data) {
                    if (data.ret != 0){
                        update_goods();
                    }
                }
            });
        }

        // 删除后台数据
        function　delete_carts(obj) {
            // 发送ajax请求，商品id
            // 获取商品的id
            var goods_id = parseInt(obj.find('.col01 input:checkbox').val());
            var flag = false;
            if (confirm("您确定要删除这条记录么？")){
                $.ajax({
                    'url': "{% url 'carts:delete_carts' %}",
                    'data': {'id': goods_id},
                    'type': 'get',
                    'async': false,  // 设置同步请求
                    'success': function (data) {
                        if (data.ret != 0){
                            obj.remove();
                            update_goods();
                        }
                    }
                });
            }
        }

        $(function () {
            // 增加商品
            $('.add').click(function () {
                var parent = $(this).parents('.cart_list_td');
                var num = parent.find('.num_show').val();
                num = parseInt(num) + 1;
                update_carts(parent, num);
            });
            // 修改商品数量
            $('.num_show').change(function () {
                var parent = $(this).parents('.cart_list_td');
                var num = parent.find('.num_show').val();
                update_carts(parent, num);
            });
            // 减少商品
            $('.minus').click(function () {
                var parent = $(this).parents('.cart_list_td');
                var num = parent.find('.num_show').val();
                num = parseInt(num) - 1;
                if(num < 1){
                    num = 1;
                }
                update_carts(parent, num);
            });
            // 多选框
            $('.cart_list_td .col01 input:checkbox').click(function () {
                update_goods();
            });
            // 全选框
            $('.settlements .col01 input:checkbox').click(function () {
                if ($(this).prop('checked')){
                    $('.cart_list_td .col01 input:checkbox').prop('checked', true);
                }
                else{
                    $('.cart_list_td .col01 input:checkbox').prop('checked', false);
                }
                update_goods();
            });
            //  删除按钮
            $('.cart_list_td .col08').click(function () {
                var parent = $(this).parents('.cart_list_td');
                delete_carts(parent);
            });
            // 提交点击事件
            $('.settlements .col04 a').click(function () {
                // 判断是否有多选框选中
                var flag = false;
                $('.cart_list_td .col01 input:checkbox').each(function () {
                    if ($(this).prop('checked')){
                        flag = true;
                    }
                });
                if (flag == true){
                    // 有商品选中，就可以提交订单
                    $('#order').submit();
                }
                else {
                    alert("未选中商品，请重新提交!");
                }
            });
        });
    </script>
{% endblock head_js %}

{% block body %}

    {% include "common/status.html" %}

	<div class="search_bar clearfix">
        {# 加载头部logo #}
        {% include "common/goods_logo.html" %}

		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
        {# 加载头部搜索框 #}
        {% include "common/goods_search.html" %}

	</div>

	<div class="total_count">全部商品<em>{{ carts.amount }}</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
    <form id="order" action="{% url 'order:place_order' %}" method="post">
    {% csrf_token %}
   {% for cart in carts %}
	<ul class="cart_list_td clearfix">
       {% with goods=cart.cart_goods %}
		<li class="col01"><input value="{{ goods.id }}" type="checkbox" name="goods_id" checked></li>
		<li class="col02"><img src="{% static goods.goods_image %}"></li>
		<li class="col03">{{ goods.goods_name }}<br><em>{{ goods.goods_price }}元/{{ goods.goods_unit }}</em></li>
		<li class="col04">{{ goods.goods_unit }}</li>
		<li class="col05">{{ goods.goods_price }}元</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl">+</a>
				<input type="text" class="num_show fl" value="{{ cart.cart_amount }}">
				<a href="javascript:;" class="minus fl">-</a>	
			</div>
		</li>
		<li class="col07">{{ cart.single }}元</li>
		<li class="col08"><a href="javascript:;">删除</a></li>
       {% endwith %}
	</ul>
   {% endfor %}
    </form>

	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>{{ carts.total }}</em><br>共计<b>{{ carts.amount }}</b>件商品</li>
		<li class="col04"><a href="javascript:;">去结算</a></li>
	</ul>
{% endblock body %}
